export default {
  data () {
    return {
      personBarEchart: null,
      personBarOption: {
        tooltip: {
          confine: true,
          padding: [3, 10],
          formatter: (params) => {
            return `${params.seriesName}${params.value}`
          },
          backgroundColor: 'rgba(9, 37, 56, 0.5)',
          extraCssText: 'box-shadow: 0 0 5px 2px rgba(8, 69, 69) inset;'
        },
        grid: {
          top: -2,
          left: 5,
          right: 0,
          bottom: 0
        },
        xAxis: {
          type: 'value',
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false
          },
          data: []
        },
        yAxis: {
          type: 'category',
          show: false,
          inverse: true,
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#a8c5ed'
          }
        },
        series: [
          {
            name: '进场人数',
            barWidth: 14,
            barGap: '-100%',
            barCategoryGap: 0,
            label: {
              show: true,
              color: '#fff',
              position: 'insideRight',
              distance: 2,
              formatter: (params) => {
                if (params.value) {
                  return params.value
                } else {
                  return ''
                }
              }
            },
            itemStyle: {
              color: 'rgba(23, 86, 102, 0.5)'
            },
            data: [],
            type: 'bar',
            tooltip: {
              formatter: (params) => {
                return `进场人数: ${(this.attendanceNumList[params.dataIndex].totalNum) || 0}<br>在场人数: ${(this.attendanceNumList[params.dataIndex].currentNum) || 0}`
              }
            }
          },
          {
            name: '在场人数',
            barWidth: 14,
            barCategoryGap: 0,
            label: {
              show: true,
              color: '#fff',
              position: 'insideRight',
              distance: 2,
              formatter: (params) => {
                if (params.value) {
                  return params.value
                } else {
                  return ''
                }
              }
            },
            itemStyle: {
              color: new this.$echarts.graphic.LinearGradient(
                1, 0, 0, 0,
                [
                  {offset: 0, color: '#3ac874'},
                  {offset: 1, color: '#34b9c6'}
                ]
              )
            },
            data: [],
            type: 'bar',
            tooltip: {
              formatter: (params) => {
                return `进场人数: ${(this.attendanceNumList[params.dataIndex].totalNum) || 0}<br>在场人数: ${(this.attendanceNumList[params.dataIndex].currentNum) || 0}`
              }
            }
          }
        ]
      }
    }
  },
  methods: {
    initPersonBar () {
      const ref = this.personData[this.currentIndex].ref
      const totalNum = []
      const currentNum = []
      const professionName = []
      this.attendanceNumList.forEach(item => {
        totalNum.push(item.totalNum)
        currentNum.push(item.currentNum)
        professionName.push(item.professionName)
      })
      this.workType = professionName
      this.$nextTick(() => {
        const rect = this.$refs.realTimeLeft[1].getBoundingClientRect()
        this.realTimeheight = rect.height
        this.personBarOption.xAxis.data = professionName
        this.personBarOption.series[0].data = totalNum
        this.personBarOption.series[1].data = currentNum
        if (!this.personBarEchart) {
          this.personBarEchart = this.$echarts.init(this.$refs[ref][1])
        }
        this.personBarEchart.setOption(this.personBarOption)
      })
    }
  }
}
